<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抽奖实践--大转盘</title>
</head>

<body>
  <div id="my-lucky"></div>

  <script src="https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.11"></script>
  <script>
    const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
      width: '300px',
      height: '300px',
      blocks: [
        { padding: '10px', background: '#617df2' },
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#afc8ff' },
        { padding: '10px', background: '#e9e8fe' },
      ],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      defaultConfig: {
        gutter: '5px',  // 奖品间隙
        speed: 10, // 最大速度
        accelerationTime: 1000,
        // decelerationTime: 2000
      },
      buttons: [
        { radius: 20, background: '#617df2', pointer: true, }
      ],
      start: function () {
        console.log('start', new Date().getSeconds())
        myLucky.play()
        // 假设接口的请求速度是1s
        setTimeout(_ => {
          myLucky.stop(3)
        }, 3000)
      },
      end: function (prize) {
        console.log('end', new Date().getSeconds())
        alert('恭喜中奖: ' + prize.fonts[0].text)
      }
    })
    // 开始
    // myLucky.play();
  </script>
</body>

</html>